<template>
  <div class="orderContainer">
    <!-- 头部 组件-->
    <Header></Header>
    <div class="table">
      <!-- 表格头部 -->
      <div class="tableHeader">
        <div class="table-th">
          <div class="table-th1">项目</div>
          <div class="table-th2">单价</div>
          <div class="table-th3">数量</div>
          <div class="table-th4">总价</div>
        </div>
      </div>
      <!-- 表格内容 -->
      <ul class="tableBody">
        <li class="table-con1">
          <div>{{ name }}</div>
        </li>
        <li class="table-con2">
          <div>
            ￥<span>{{ price }}</span>
          </div>
        </li>
        <li class="table-con3">
          <button class="subBtn" @click="subAllNum">-</button>
          <span class="context">{{ allNum }}</span>
          <button class="addBtn" @click="addAllNum">+</button>
        </li>
        <li class="table-con4">
          <div>
            ￥<span>{{ allPrice }}</span>
          </div>
        </li>
      </ul>
      <div class="payTotal">
        应付金额: ￥<span>{{ allPrice }}</span>
      </div>
      <div class="sendTip">
        将发送美团券密码至手机号: {{ phone }} <a>绑定新手机号</a>
      </div>
      <div class="submit">
        <Button class="submitBtn" @click="toPay" type="primary">
          <!-- <router-link to="/pay">提交订单</router-link> -->
          提交订单
        </Button>
      </div>
    </div>
    <!-- 底部 组件-->
    <Footer />
  </div>
</template>

<script>
import { defineComponent } from "vue";
export default defineComponent({
  name: "Order",
});
</script>

<script setup>
import { Button } from "ant-design-vue";
import Header from "../../components/Header";
import Footer from "../../components/Footer";
import router from "../../router/index";
import { onMounted, ref, computed } from "vue";
import { useRouter } from "vue-router";

const route = useRouter();
const name = ref();
const price = ref();
const allNum = ref(1);
const phone = JSON.parse(localStorage.getItem("user")).phone;
// 点击-号,执行的逻辑
const subAllNum = () => {
  if (allNum.value === 1) {
    allNum.value = 1;
  } else {
    allNum.value--;
  }
};
// 点击+号
const addAllNum = () => {
  allNum.value++;
};
// 总价
const allPrice = computed(() => {
  return price.value * allNum.value;
});
onMounted(() => {
  //   console.log(route.currentRoute.value.query);
  // 获取传递过来的商品名和价格
  name.value = route.currentRoute.value.query.name;
  price.value = route.currentRoute.value.query.price;
});

const toPay = () => {
  // console.log(111);
  router.push({
    path: "/pay",
    query: { name: name.value, price: allPrice.value },
  });
};
</script>

<style scoped>
* {
  margin: 0;
  padding: 0;
}
.orderContainer .table {
  width: 980px;
  /* height: 500px; */
  /* border: 1px solid black; */
  margin: 30px auto;
}
.orderContainer .table .tableHeader {
  width: 100%;
  height: 40px;
  background: #f5f5f5;
  border: 1px solid #ddd;
  padding: 10px;
  overflow: hidden;
  font-size: 14px;
  /* box-sizing: border-box; */
}
.table .tableHeader .table-th {
  display: flex;
  align-items: center;
}
.table .tableHeader .table-th .table-th1,
.table-con1 {
  width: 50%;
}
.table .tableHeader .table-th .table-th2,
.table-con2 {
  width: 15%;
  /* vertical-align: middle; */
  text-align: center;
}
.table .tableHeader .table-th .table-th3,
.table-con3 {
  width: 20%;
  /* vertical-align: middle; */
  text-align: center;
}
.table .tableHeader .table-th .table-th4,
.table-con4 {
  width: 15%;
  /* vertical-align: middle; */
  text-align: center;
}
.tableBody {
  height: 50px;
  display: flex;
  align-items: center;
  list-style: none;
  border-bottom: 1px solid #eee;
  padding: 10px;
  font-size: 16px;
  color: #666;
}
.table .payTotal {
  width: 100%;
  height: 60px;
  display: flex;
  align-items: center;
  justify-content: right;
  margin-top: 30px;
  border-top: 1px solid #eee;
  border-bottom: 1px solid #eee;
  color: 12px;
}
.table .payTotal > span {
  padding-right: 20px;
  color: #f76120;
  font-size: 20px;
}
.table .sendTip {
  width: 100%;
  height: 40px;
  padding: 10px;
}
.table .sendTip > a {
  color: #2bb8aa;
}
.table .submit {
  float: right;
  padding: 10px;
}
.table .submit .submitBtn {
  display: inline-block;
  padding: 7px 20px 5px;
  line-height: 100%;
  font-size: 20px;
  font-weight: 400;
  color: #fff;
  background-color: #2db3a6;
  background-image: linear-gradient(to bottom, #2ec3b4, #2db3a6);
  border-width: 0 0 1px;
  border-color: #008177;
  border-radius: 2px;
  -webkit-user-select: none;
  user-select: none;
  cursor: pointer;
  letter-spacing: 2px;
}
.table-con3 {
  font-size: 15px;
}
.table-con3 .addBtn,
.subBtn {
  width: 24px;
  height: 24px;
  color: #333;
  border: 1px solid #ccc;
  background-color: #fff;
  outline: none;
  box-sizing: border-box;
}
.table-con3 > span {
  padding-left: 10px;
  padding-right: 10px;
  border: 1px solid #ccc;
  font-size: 16px;
}
</style>
